<template>
    <div>
      <div class="table-head">
        <table class="layui-table" style="">
          <colgroup>
            <col v-for="(colItem, idx) in cols" :key="'col-' + idx" :style="{width: getColWidth(colItem)}"/>
          </colgroup>
          <thead>
            <tr>
              <th 
              v-for="(colItem, idx2) in cols" 
              :key="'th-' + idx2" 
              :style="{textAlign: getAlign(colItem)}"
              >{{ colItem.title }}</th>
            </tr>
          </thead>
        </table>
      </div>
  
      <div class="table-body" :style="{height: getHeight()}">
        <table class="layui-table" style="background: #000127;">
          <colgroup>
            <col v-for="(colItem, idx3) in cols" :key="'col2-' + idx3" :style="{width: getColWidth(colItem)}"/>
          </colgroup>
          <tbody v-if="data && data.length > 0" >
            <tr v-for="(dtItem, idx5) in data" :key="'dt-' + idx5" :class="[idx5%2 == 1 ? 'color1' : '']">
              <td v-for="(colItem, idx6) in cols" :key="'col3-' + idx6" :style="{textAlign: getAlign(colItem)}">
                <div v-if="colItem.type && colItem.type == 'num'">{{ idx5 + 1 }}</div>
                <div v-else>{{ dtItem[colItem.field] }}</div>
              </td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr class="color1">
              <td :colspan="cols.length" style="text-align: center;">暂无数据</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div :class="[isShow==5?'load_more':'load_more1']" v-if="isload">
        <div @click="loadMore()">加载更多<img src="../assets/images/loadMore.png" alt=""></div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      "cols": {
        type: Array,
        default: [
          {type: "num", title: '序号'},
          {field: "field1", title: '字段1'},
          {type: "field2", title: '字段2'},
        ]
      }, 
      "data": {
        type: Array,
        default: []
      }, 
      "isload": {
        type: Boolean,
        default: false
      }, 
      "height": {
        type: String|Number,
        default: 190
      }
    },
    data() {
      return {
        datas: []
      }
    },
    methods: {
      loadMore() {
        this.$emit('loadMore');
        return false;
      },
      getTitle(colItem) {
        const title = colItem.title;
        if (title) {
          return title;
        } else {
          if (colItem.type && colItem.type == 'num') {
            return '序号';
          } else {
            return colItem.field;
          }
        }
      },
      getColWidth(colItem) {
        const type = colItem.type;
        const width = colItem.width;
        if (width) {
          if ((width + '').slice(-1) == '%' || (width + '').slice(-2) == 'px') {
            return width;
          } else {
            return width + 'px';
          }
        } else {
          if (type && 'num' == type) {
            return 80 + 'px';
          } else {
            return 'auto';
          }
        }
      },
      getAlign(colItem) {
        const align = colItem.align;
        if (align && ('center' == align || 'left' == align || 'right' == align)) {
          return align;
        } else {
          return left;
        }
      },
      getHeight() {
        if ((this.height + '').slice(-1) == '%' || (this.height + '').slice(-2) == 'px') {
          return this.height;
        } else {
          if (Number(this.height) < 90) {
            return '90px';
          } else {
            return this.height + 'px';
          }
        }
      }
    }
  };
  </script>
  
  <style lang="less" scoped>
  .table-body {
    width: 100%;
    overflow-y: auto;
  }
  
  .table-body::-webkit-scrollbar {
    width: 0;
  }
  
  table.layui-table {
    margin: 0;
    width: 100%;
    color: #ffffff;
    background: rgba(14, 43, 117, 0.5);
    thead {
      tr {
        background: rgba(14, 43, 117, 0.5);
      }
    }
    // tr {
    //   width: 100%;
    //   display: flex;
    //   overflow: hidden;
    //   background: rgba(14, 43, 117, 0.5);
    // }
    th, td {
      padding: 5px;
      border: none;
    }
    .color1 {
      background: #07164e;
    }
    tbody tr:hover {
      background: rgba(14, 43, 117, 0.8);
    }
  }
  .load_more {
    margin-top: 0.4rem;
    width: 110%;
    height: 0.45rem;
    border: 0.01rem solid #32c5ff;
    font-size: 0.16rem;
    line-height: 0.45rem;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.5rem;
    color: #32c5ff;
    img {
      width: 0.2rem;
      height: 0.12rem;
    }
  }
  .load_more1 {
    margin-top: 0.4rem;
    width: 100%;
    height: 0.45rem;
    border: 0.01rem solid #32c5ff;
    font-size: 0.16rem;
    line-height: 0.45rem;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.5rem;
    color: #32c5ff;
    img {
      width: 0.2rem;
      height: 0.12rem;
    }
  }
  </style>